<!doctype html>
<html>
	<head>
		<title>围棋画布</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<script type="text/javascript">
		var g_oMyCanvas = {};
		function init(){
			g_oMyCanvas = new creatCanvas();
			g_oMyCanvas.initCanvas();
		}
		function creatCanvas() {
	        return new creatCanvas.prototype.init();
	    }
		creatCanvas.prototype={	        
	        init:function(){
	        	this.getCanvas();
	        },
	        aChessboard:[],//用于记录棋盘上的落子
	        oCanvas:'',
	        whitePieces:{},
	        blackPieces:{},
	        piecesSize:26,
	        isBlack:false,
			getCanvas:function(){
				this.aChessboard = new Array(19*19).fill(0); //0 表示可落子 1黑子 -1 白子
				this.whitePieces = document.getElementById("whitePieces");
				this.blackPieces = document.getElementById("blackPieces");
	        	var c=document.getElementById("myCanvas");
				this.oCanvas=c.getContext("2d");
	        },
	        initCanvas:function(){
				for (var i = 1; i <= 19; i++) {
					this.setGoLine(1,i,false);
					this.setGoLine(i,1,true);
					// for 循环里画圆 居然会被改变大小？！
					/* if(!((i-4)%6)){
						this.setCircle(4,i);
						this.setCircle(10,i);
						this.setCircle(16,i);
					} */
				}
				// 设置天元和星位
				this.setCircle(4,4);
				this.setCircle(4,10);
				this.setCircle(4,16);
				this.setCircle(16,10);
				this.setCircle(10,10);
				this.setCircle(10,16);
				this.setCircle(10,4);
				this.setCircle(16,4);
				this.setCircle(16,16);
			},
			// 棋盘线
			setGoLine:function(line,row,isRow){
				
				if(isRow){
					this.oCanvas.moveTo(17+(line-1)*this.piecesSize-0.5,17+(row-1)*this.piecesSize);
					this.oCanvas.lineTo(17+(line-1)*this.piecesSize-0.5,485);
				}else{
					this.oCanvas.moveTo(17+(line-1)*this.piecesSize-0.5,17+(row-1)*this.piecesSize-0.5);
					this.oCanvas.lineTo(485,17+(row-1)*this.piecesSize-0.5);
				}
				this.oCanvas.stroke();
			},
			// 天元和星位
			setCircle:function(line,row){
				this.oCanvas.fillStyle="#000000";
				this.oCanvas.beginPath();
				this.oCanvas.arc(17+(line-1)*this.piecesSize-0.5,17+(row-1)*this.piecesSize-0.5,2,0,Math.PI*2,true);
				this.oCanvas.closePath();
				this.oCanvas.fill();
			},
			setPieces:function(line,row){
				if(!line||!row){return;}
				if(this.aChessboard[(line-1)*19+row]){return;}			
				var img={};
				if(!this.isBlack){
					img=this.blackPieces;
				}else{
					img=this.whitePieces;
				}
				this.isBlack = !this.isBlack;
				this.aChessboard[(line-1)*19+row] = this.isBlack ? 1 : -1;
				this.oCanvas.drawImage(img,17+(line-1)*this.piecesSize-(this.piecesSize/2),17+(row-1)*this.piecesSize-(this.piecesSize/2),this.piecesSize,this.piecesSize);	
				// console.log('set pieces complated');
			},
			// 获取坐标
			getCoordinates:function(e){
				var x=e.clientX;
				var y=e.clientY;
				// console.log("Coordinates: (" + x + "," + y + ")");
			},
			// 点击 落子的相关处理
			canvasClick:function(e){
				var x=e.clientX;
				var y=e.clientY;				
				this.setPieces(this.getLineOrRow(x),this.getLineOrRow(y));
				// console.log("canvasClick: (" + x + "," + y + "," + this.getLineOrRow(x) + "," + this.getLineOrRow(y) + ")");
			},
			// 获取点击位置的落子位置
			getLineOrRow:function(position){
				if(position>498){return;}
				position = position+8;//这个地方很奇怪,body默认有8px的margin，之前为何是减17呢？？？？
				var piecesPos = Math.floor((position-17)/this.piecesSize);
				return (position-17)%this.piecesSize == 0 ? piecesPos+1:(Math.abs((piecesPos+1)*this.piecesSize-position)<(this.piecesSize/2)?piecesPos+1:piecesPos+2);
			}
	    }
	    creatCanvas.prototype.init.prototype = creatCanvas.prototype;
		</script>
		<style>
		body{margin: 0;padding: 0;}
		</style>
	</head>
	<body onload="init();">
		<canvas id="myCanvas" width="500" height="500" 
			style="background:url(image/board_bg_01.jpg) no-repeat;"
			onclick="g_oMyCanvas.canvasClick(event)">
		</canvas>
		<img src="image/white_stone.png" id="whitePieces" style="display:none">
		<img src="image/black_stone.png" id="blackPieces" style="display:none">
	</body>
</html>